import { forwardRef, useImperativeHandle, useRef } from "react"

const Son = forwardRef((props, ref) => {
    // 实现聚焦逻辑
    const inputRef = useRef(null)
    const focusSon = () => {
        console.log(`子组件方法被调用`)
        inputRef.current.focus()
    }
    // 聚焦方法暴漏出去
    useImperativeHandle(ref, () => {
        return {
            focusSon
        }
    })
    return <input type="text" ref={inputRef}></input>
})

const practice = () => {

    const sonRef = useRef(null)

    const focusHandler = () => {
        sonRef.current.focusSon()
    }

    return (
        <div>
            <div>useImperativeHandle</div>
            <Son ref={sonRef} />
            <button onClick={focusHandler}>focus</button>
        </div>
    )
}

export default practice